<template>
  <page-loading :show="pageLoading">
    <view class="wrapper">
      <view class="info">
        <view class="item flex flex-ai-c">
          <text class="item-left color-999">品牌车型</text>
          <text class="item-right color-333 flex-1">{{ carInfo.name }}</text>
        </view>
        <view class="item flex flex-ai-c" v-if="edditCarBrand">
          <text class="item-left color-999">车牌</text>
          <text class="item-right color-333">{{ carInfo.carbrand }}</text>
        </view>
        <view class="item flex flex-ai-c" v-else>
          <text class="item-left color-999">车牌</text>
          <input
            v-model="carInfo.carbrand"
            type="text"
            maxlength="8"
            placeholder="请输入车牌"
            class="item-right color-333 flex-1"
          />
          <i-icon
            icon="iconbianji-s"
            type="single"
            size="30rpx"
            color="#FBB000"
          ></i-icon>
        </view>
        <view class="item flex flex-ai-c" v-if="edditCarVin">
          <text class="item-left color-999">车架号VIN</text>
          <text class="item-right color-333">{{ carInfo.vin }}</text>
        </view>
        <view class="item flex flex-ai-c" v-else>
          <text class="item-left color-999">车架号VIN</text>
          <input
            v-model="carInfo.vin"
            type="text"
            maxlength="17"
            placeholder="请输入"
            @blur="vincheck"
            class="item-right color-333 flex-1"
          />
          <i-icon
            icon="iconbianji-s"
            type="single"
            size="30rpx"
            color="#FBB000"
          ></i-icon>
        </view>
        <view class="item flex flex-ai-c" @click="gotoPage">
          <text class="item-left color-999">轮胎规格</text>
          <text class="item-right color-333 flex-1">{{
            carInfo.tireSize
          }}</text>
          <u-icon
            class="pl-10"
            name="arrow-right"
            color="#999"
            size="26rpx"
          ></u-icon>
        </view>
        <view class="item flex flex-ai-c">
          <text class="item-left color-999">里程数（km)</text>
          <input
            type="number"
            v-model="carInfo.km"
            maxlength="8"
            placeholder="请输入车辆里程"
            class="item-right color-333 flex-1"
          />
          <i-icon
            icon="iconqiyebianji"
            type="single"
            size="30rpx"
            color="#FBB000"
          ></i-icon>
        </view>
        <view class="item flex flex-ai-c" v-if="edditCarEngineType">
          <text class="item-left color-999">发动机号 </text>
          <text class="item-right color-333">{{ carInfo.engineType }}</text>
        </view>
        <view class="item flex flex-ai-c" v-else>
          <text class="item-left color-999">发动机号</text>
          <input
            v-model="carInfo.engineType"
            type="text"
            placeholder="请输入发动机号"
            class="item-right color-333 flex-1"
          />
          <i-icon
            icon="iconqiyebianji"
            type="single"
            size="30rpx"
            color="#FBB000"
          ></i-icon>
        </view>
      </view>
      <view class="btn">
        <button class="btn-primary" @click="submit">保存</button>
      </view>

      <!-- 弹框提示 -->
      <u-popup v-model="showPopup" mode="center" :mask="true" width="540">
        <view class="popup-content">
          <view class="title">温馨提示</view>
          <view class="content">您当前编辑的信息还未保存，请确认是否保存</view>
          <view class="btn-box flex">
            <button class="btn-left" @click="cancel">取消</button>
            <button class="btn-right" @click="okey">确定</button>
          </view>
        </view>
      </u-popup>
    </view>
  </page-loading>
</template>
<script>
export default {
  data() {
    return {
      carInfo: {},
      initCarInfo: {}, //车辆信息原始值
      edditCarBrand: true, //是否符合要求
      edditCarVin: true, //是否符合要求
      edditCarEngineType: true, //是否符合要求
      isSave: false, //是否已保存当前数据
      showPopup: false, //显示弹窗
      pageLoading: false, //初始化加载效果
    }
  },

  onLoad() {
    uni.$on('selTyre', (data) => {
      console.log(data)
      this.carInfo.tireSize = data
    })
    this.carInfo = this.$store.state.afterSales.carInfo
    this.initCarInfo = { ...this.carInfo }
    this.edditCarBrand = this.carInfo.carbrand.length !== 0
    this.edditCarVin = this.carInfo.vin.length !== 0
    this.edditCarEngineType = this.carInfo.engineType.length !== 0

    this.$nextTick(() => {
      this.pageLoading = true
    })
  },

  onBackPress() {
    if (!this.isSave) {
      if (this.initCarInfo.tireSize !== this.carInfo.tireSize) {
        this.showPopup = true
        return true
      } else if (this.carInfo.km !== this.initCarInfo.km) {
        this.showPopup = true
        return true
      } else if (
        this.edditCarBrand &&
        this.carInfo.carbrand !== this.initCarInfo.carbrand
      ) {
        this.showPopup = true
        return true
      } else if (
        this.edditCarVin &&
        this.carInfo.vin !== this.initCarInfo.vin
      ) {
        this.showPopup = true
        return true
      } else if (
        this.edditCarEngineType &&
        this.carInfo.engineType !== this.initCarInfo.engineType
      ) {
        this.showPopup = true
        return true
      }
    }
    return false
  },

  methods: {
    submit() {
      let errToase = (title) => {
        uni.showToast({
          title: title,
          icon: 'none',
        })
      }

      if (!this.edditCarBrand && this.carInfo.carbrand.length < 6) {
        errToase('请填写正确的车牌')
        return false
      }

      if (!this.edditCarVin && !/^[A-HJ-NPR-Z\d]{17}$/.test(this.carInfo.vin)) {
        errToase('请填写正确的VIN')
        return
      }

      if (!this.edditCarEngineType && !this.carInfo.engineType.length) {
        errToase('请填写发动机号')
        return false
      }
      if (!this.carInfo.km || this.carInfo.km < 0.01) {
        errToase('请填写车辆里程')
        return false
      }

      this.$api.afterSales
        .updateCarData({
          carid: this.carInfo.loveCarId,
          car_num: this.carInfo.carbrand,
          mileage: Number(this.carInfo.km),
          vin: this.carInfo.vin,
          roadTime: '',
          typrSize: this.carInfo.tireSize,
          engine: this.carInfo.engineType,
        })
        .then((res) => {
          this.initCarInfo = { ...this.carInfo }
          uni.showToast({
            title: '提交成功',
            duration: 2000,
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            })
          }, 2000)
        })
        .catch((e) => {
          console.log(e)
        })
    },

    gotoPage() {
      uni.navigateTo({
        url:
          '/pages_afterSales/tyre/selectTyre?carId=' +
          this.carInfo.carId +
          '&tyreSize=' +
          this.carInfo.tireSize +
          '&type=back',
      })
    },

    vincheck() {
      this.carInfo.vin = this.carInfo.vin.toUpperCase()
      const exp = /^[A-HJ-NPR-Z\d]{17}$/
      if (!exp.test(this.carInfo.vin)) {
        uni.showToast({
          title: '请输入正确的vin码',
          icon: 'none',
        })
      }
    },

    cancel() {
      this.showPopup = false
      this.isSave = true
      uni.navigateBack()
    },

    okey() {
      this.showPopup = false
      this.submit()
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: #f6f6f6;
}
.wrapper {
  padding: 20rpx 24rpx;

  .info {
    padding: 0 20rpx;
    border-radius: 10rpx;
    background: #fff;

    .item {
      border-bottom: 2rpx solid #eee;
      font-size: 28rpx;
      font-weight: 500;
      height: 100rpx;

      &:last-child {
        border-bottom: none;
      }

      .item-left {
        width: 200rpx;
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 56rpx;
    left: 24rpx;
    right: 24rpx;

    .btn-primary {
      width: 100%;
    }
  }
}

// 提示弹框
.popup-content {
  padding: 30rpx 46rpx;
  text-align: center;

  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
  }

  .content {
    padding: 46rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
  }

  .btn-box {
    .btn {
      height: 78rpx;
      font-size: 30rpx;
      color: #333;
    }

    .btn-left {
      width: 50%;
      border-radius: 39rpx 0 0 39rpx;
      height: 78rpx;
      font-size: 30rpx;
      background: #333;
      color: #ffe23e;
    }

    .btn-right {
      width: 50%;
      border-radius: 0 39rpx 39rpx 0;
      height: 78rpx;
      font-size: 30rpx;
      color: #333;
      background: linear-gradient(-90deg, #fdd421, #ffe23e);
    }
  }
}

/deep/ uni-button:after {
  border: none;
}
</style>
